<template>
    <div>
        <div>
            <button @click="componentName = 'One'">One</button>
            <button @click="componentName = 'Two'">Two</button>
            <button @click="componentName = 'Three'">Three</button>
        </div>
        <component :is="componentName"></component>
    </div>
</template>

<script>
/*
  书写异步组件的原因:
    - 在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块
    - Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染
*/
// import One from "@/components/One";
// import Two from "@/components/Two";
// import Three from "@/components/Three";

const One = ()=>{
  return import("@/components/One");
};
const Two = ()=>{
  return import("@/components/Two");
};
const Three = ()=>{
  return import("@/components/Three");
};
export default {
    name: "App",
    components: {
        One:()=> import("@/components/One"),
        Two,
        Three,
    },
    data() {
        return {
            componentName: "One",
        };
    },
};
</script>
